<template>
  <div class='container'>
    <div class="containerteo">
      <div>
        <el-form class="formfisrt" ref="form" :model="form" label-width="80px">
          <el-form-item prop="subjectName"  label="学科名称" style="width: 100%;">
              <el-input v-model="P.subjectName" @change="isFlag = true"></el-input>
          </el-form-item>
          <el-form-item style="width: 100%;">
            <template>
              <el-button @click="hClose">清除</el-button>
              <!-- <el-button type="primary" @click="SearchSubjectList">搜索</el-button> -->
              <el-button type="primary" @click="()=>(q.page=1,SearchSubjectList())">搜索</el-button>
            </template>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-button class="addbtn">
            <i class="el-icon-edit"></i>
            <span @click="hAdd">新增学科</span>
        </el-button>
      </div>
    </div>
    <div class="el_alert">
      <div class="el_content">
         <i class="el-alert__icon el-icon-info"></i>
         <span class="el_title">数据一共{{total}}条</span>
      </div>
      <i class="el_closebtn el-icon-close" style="display:none"></i>
    </div>
    <el-table
     :data="tableData"
     style="width: 100%">
     <el-table-column
      type="index"
      label="序号"
      >
    </el-table-column>
    <el-table-column
      prop="subjectName"
      label="学科名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="username"
      label="创建者"
      width="180">
    </el-table-column>
    <el-table-column
      prop="addDate"
      label="创建日期">
      <template v-slot="{row}">
        {{formate(row.addDate)}}
      </template>
    </el-table-column>
    <el-table-column
      prop="isFrontDisplay"
      label="前台是否显示">
     <template v-slot="{row}">
      {{changFront(row.isFrontDisplay)}}
     </template>
    </el-table-column>
    <el-table-column
      prop="twoLevelDirectory"
      label="二级目录">
    </el-table-column>
    <el-table-column
      prop="tags"
      label="标签">
    </el-table-column>
    <el-table-column
      prop="totals"
      label="题目数量">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="220">
      <template v-slot="{row}">
        <el-button @click="hRouter(row)" type="text" size="small">学科分类</el-button>
        <el-button @click="$router.push('./tags')" type="text" size="small">学科标签</el-button>
        <el-button type="text" size="small" @click="hEdit(row)">修改</el-button>
        <el-button type="text" size="small" @click="hDel(row.id)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
    <div class="el_pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="q.page"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="q.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog
      :title="isEdit?'编辑':'添加'"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="20%"
      @closed='hsubmir'
      >
      <subjects-add ref="subject" @success="hSuccess" :is-edit="isEdit"  :row="dataRow" @close="dialogVisible=false" />
    </el-dialog>
  </div>
</template>

<script>
import SubjectsAdd from '../components/subjects-add.vue'
import dayjs from 'dayjs'
import { list, remove } from '@/api/hmmm/subjects'
export default {
  components: { SubjectsAdd },
  data () {
    return {
      form: {
        subjectName: '', // 学科名称
        username: '', // 创建者
        addDate: '', // 创建日期
        isFrontDisplay: '', // 前台是否显示
        twoLevelDirectory: '', // 二级目录
        tags: '', // 标签
        totals: '' // 题目数量
      },
      q: {
        page: 1,
        pagesize: 10
      },
      P: {
        subjectName: ''
      },
      tableData: [],
      total: 0,
      dialogVisible: false,
      isEdit: false,
      dataRow: {},
      isFlag: true
    }
  },
  created () {
    this.loadSubjectList()
  },
  methods: {
    // 点击清除清空表单
    hClose () {
      this.isFlag = true
      this.P = {
        subjectName: '' // 学科名称
      }
      // this.q = {
      //   page: 1,
      //   pagesize: 2
      // }
      this.q.page = 1
      this.loadSubjectList()
    },
    // 获取学科列表
    async  loadSubjectList (data) {
      // const res = await list(this.q)
      const res = await list({ ...this.q, ...data })
      // console.log(res)
      this.tableData = res.data.items
      this.total = res.data.counts
    },
    // 转换是否前台显示格式
    changFront (isFront) {
      return isFront === 1 ? '是' : '否'
    },
    // 转换时间格式
    formate (data) {
      return dayjs(data).format('YYYY-MM-DD HH:MM:ss')
    },
    // 删除学科数据
    async hDel (id) {
      try {
        const result = await this.$confirm('此操作将永久删除该学科，是否继续？', '提示', { type: 'warning' })
        if (result !== 'confirm') return
        await remove({ id })
        // console.log(res)
        this.$message.success('删除成功')
        this.loadSubjectList()
      } catch (e) {
        console.log(e)
      }
    },
    // 点击搜索筛选学科名称
    async SearchSubjectList () {
      this.isFlag = false
      this.loadSubjectList(this.P)
    },
    handleCurrentChange (page) {
      this.q.page = page
      if (this.isFlag) {
        this.loadSubjectList()
      } else {
        this.loadSubjectList(this.P)
      }
    },
    handleSizeChange (pagesize) {
      this.q.pagesize = pagesize
      if (this.isFlag) {
        this.loadSubjectList()
      } else {
        this.loadSubjectList(this.P)
      }
      // this.q.page = 1
      // this.loadSubjectList()
    },
    hAdd () {
      this.isEdit = false
      this.dialogVisible = true
    },
    hSuccess () {
      this.dialogVisible = false
      this.loadSubjectList()
    },
    async hEdit (row) {
      // 设为编辑状态
      this.isEdit = true
      // 显示弹层
      this.dialogVisible = true
      // this.dataRow = row
      // 把当前的数据直接给表单  深拷贝方式

      this.dataRow = { id: row.id, subjectName: row.subjectName, isFrontDisplay: Number(row.isFrontDisplay) }
      // console.log(this.dataRow)
      await this.$nextTick()
      this.$refs.subject.EditSubjects()
    },
    hRouter (row) {
      this.$router.push({
        path: 'directorys',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    },
    async hsubmir () {
      await this.$nextTick()
      this.$refs.subject.resetForm()
    }
  }
}
</script>

<style scoped lang='scss'>
.container{
    width: 100%;
    height: 100%;
    background-color: #fff;
    margin: 10px 10px 0;
    padding: 30px;
  }
.addbtn{
    background-color: #67c23a;
    color: #fff;
  }
  .formfisrt{
    display: flex;
  }
  .containerteo{
    display: flex;
    justify-content: space-between;
  }
   .el_alert{
    display: flex;
    justify-content: space-between;
    color: #909399;
    background-color: #f4f4f5;
    width: 100%;
    padding: 8px 16px;
    margin-bottom: 20px;
  }
  .el_content .el_title{
    margin-left: 10px;
  }
   .el_pagination{
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
</style>
